import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Form, Select, Input, DatePicker, Modal } from "antd";
import { filterState, filterMediumType } from "utils/filter";
import moment from "moment";
import { formatDate } from "utils";

const { RangePicker, MonthPicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
};
const dateFormat = "YYYY-MM-DD HH:mm:ss";
let timeStart = "";
let timeEnd = "";
const CheckingModal = ({
  form: { validateFields, getFieldsValue, getFieldDecorator },
  currentItem,
  onOk,
  onCancel,
  ...modalProps
}) => {
  const {
    number,
    title,
    mediumType,
    id,
    borrowId,
    borrowStartTime,
    borrowEndTime,
    documentYear,
    notarialMatters,
    borrowMediumType
  } = currentItem;
  const handleSubmit = e => {
    validateFields((err, values) => {
      if (!err) {
        const params = {
          id:borrowId,
          state:0,
          renewTime:moment(values.renewTime).format("YYYY-MM-DD HH:mm:ss"),
          renewReason:values.renewReason || ""
        };
        onOk(params);
      }
    });
  };

  const disabledDate = (current) => {
    return current && current < moment(borrowEndTime)
  }
  const props = {
    onOk: handleSubmit,
    onCancel:onCancel,
    ...modalProps
  };
  return (
    <Modal {...props}>
      <Form>
        <FormItem {...formItemLayout} label="档案年度">
          {getFieldDecorator("documentYear", { initialValue: documentYear })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="公证事项">
          {getFieldDecorator("notarialMatters", { initialValue: notarialMatters })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅方式">
          {getFieldDecorator("borrowMediumType", {
            initialValue: filterMediumType(borrowMediumType)
          })(<Input disabled />)}
        </FormItem>
       >
       <FormItem {...formItemLayout} label="借阅时间">
          {getFieldDecorator("range-picker", {
            initialValue: [
              moment(formatDate(borrowStartTime), dateFormat),
              moment(formatDate(borrowEndTime), dateFormat)
            ]
          })(<RangePicker disabled />)}
        </FormItem>
       <FormItem {...formItemLayout} label="续借时间">
          {getFieldDecorator("renewTime",{
            rules: [
              {
                required: true,
                message: '请选择续借时间',
              }
            ]
          })(
            <DatePicker 
              style={{width:"100%"}}
              disabledDate={disabledDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
            />
          )}
        </FormItem>
       >
        
        <FormItem {...formItemLayout} label="续借原因">
          {getFieldDecorator("renewReason")(
            <TextArea rows={4} />
          )}
        </FormItem>
      </Form>
    </Modal>
  );
};

CheckingModal.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Form.create()(CheckingModal);
